<template>
  <div class="asset-inventory-report">
    <el-card>
      <div style="margin-bottom: 16px;">
        <el-form :inline="true" size="small">
          <el-form-item label="盘点任务">
            <el-select v-model="inventoryId" placeholder="请选择盘点任务" @change="fetchAllStats">
              <el-option v-for="item in inventoryList" :key="item.id" :label="item.taskName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="inventoryId">
        <div style="display: flex; gap: 32px;">
          <div style="flex: 1;">
            <div style="font-weight: bold; margin-bottom: 8px;">盘点结果分布</div>
            <div ref="resultChart" style="height: 320px;"></div>
          </div>
          <div style="flex: 2;">
            <div style="font-weight: bold; margin-bottom: 8px;">分类盘点结果分布</div>
            <div ref="categoryChart" style="height: 320px;"></div>
          </div>
        </div>
      </div>
      <div v-else style="color: #888; margin-top: 32px;">请选择盘点任务以查看统计</div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const inventoryList = ref([])
const inventoryId = ref(null)
const resultChart = ref(null)
const categoryChart = ref(null)
let resultChartInstance = null
let categoryChartInstance = null

const fetchInventoryList = async () => {
  const res = await request.get('/asset/inventory/list')
  if (res.code === 1) {
    inventoryList.value = res.data
  }
}

const fetchAllStats = () => {
  fetchResultStat()
  fetchCategoryStat()
}

const fetchResultStat = async () => {
  if (!inventoryId.value) return
  const res = await request.get('/asset/inventoryDetail/stat/result', { params: { inventoryId: inventoryId.value } })
  if (res.code === 1) {
    renderResultChart(res.data)
  } else {
    ElMessage.error(res.msg || '获取盘点结果统计失败')
  }
}

const fetchCategoryStat = async () => {
  if (!inventoryId.value) return
  const res = await request.get('/asset/inventoryDetail/stat/category', { params: { inventoryId: inventoryId.value } })
  if (res.code === 1) {
    renderCategoryChart(res.data)
  } else {
    ElMessage.error(res.msg || '获取分类统计失败')
  }
}

const renderResultChart = (data) => {
  if (!resultChartInstance) {
    resultChartInstance = echarts.init(resultChart.value)
  }
  const resultMap = {
    1: '正常',
    2: '丢失',
    3: '损坏',
    4: '其他'
  }
  const chartData = data.map(item => ({
    name: resultMap[item.result] || ('类型' + item.result),
    value: item.count
  }))
  resultChartInstance.setOption({
    tooltip: { trigger: 'item' },
    legend: { top: 'bottom' },
    series: [
      {
        name: '盘点结果',
        type: 'pie',
        radius: '60%',
        data: chartData
      }
    ]
  })
}

const renderCategoryChart = (data) => {
  if (!categoryChartInstance) {
    categoryChartInstance = echarts.init(categoryChart.value)
  }
  // 分类+结果分组
  const resultMap = {
    1: '正常',
    2: '丢失',
    3: '损坏',
    4: '其他'
  }
  const categories = [...new Set(data.map(item => item.categoryName))]
  const resultTypes = [...new Set(data.map(item => item.result))]
  const series = resultTypes.map(result => ({
    name: resultMap[result] || ('类型' + result),
    type: 'bar',
    stack: 'total',
    data: categories.map(cat => {
      const found = data.find(d => d.categoryName === cat && d.result === result)
      return found ? found.count : 0
    })
  }))
  categoryChartInstance.setOption({
    tooltip: { trigger: 'axis' },
    legend: { top: 'bottom' },
    xAxis: { type: 'category', data: categories },
    yAxis: { type: 'value' },
    series
  })
}

onMounted(() => {
  fetchInventoryList()
})

watch(inventoryId, () => {
  fetchAllStats()
})
</script>

<style scoped>
.asset-inventory-report {
  padding: 24px;
}
</style> 